

<template>
  <div class="main-map-bg">
    <div id="allmap" style="height:100%"></div>
  </div>
</template>


 <script type="text/javascript">
import BMap from "BMap";
export default {
  name: "baiduMapSafetyWarning",
//   data() {
//     return {
// 	  map :'',
// 	  districtLoading: 0,
// 	  blist: [],
//       deviceName: [], //用于存放所有设备名称
//       befoundDeviceName: [], //用户存放被插到到的设备号名称
//       devicePoint: [], //所有设备坐标点的集合
//       deviceMarker: [], //用于存放market集合
// 	  deviceIntoSaftRange: [], //进入安全范围的设备集合
// 	  heatmapOverlay :new BMapLib.HeatmapOverlay({ radius: 20 }),
  
//     };
//   },
  methods: {
	   getMarketByCity:function(){
	   },
    ready: function() {
    //    this.map = new BMap.Map("allmap", { enableMapClick: false });
    //   this.map.centerAndZoom(new BMap.Point(114.088142, 32.180034), 10);
    //   this.map.enableScrollWheelZoom();
    //   this.map.disableDoubleClickZoom(); //禁止双击缩放
    //   this.map.enableScrollWheelZoom(true);
    //   this.map.setMapStyleV2({ styleJson: this.styleJson });


var map = new BMap.Map("allmap", { enableMapClick: false });
    map.centerAndZoom(new BMap.Point(114.088142,32.180034), 10);
    map.enableScrollWheelZoom();
    map.disableDoubleClickZoom();//禁止双击缩放  
map.enableScrollWheelZoom(true);

var blist = [];  
var districtLoading = 0;  
var deviceName=[];//用于存放所有设备名称
var befoundDeviceName=[];//用户存放被插到到的设备号名称
var devicePoint=[];//所有设备坐标点的集合
var deviceMarker=[];//用于存放market集合
var deviceIntoSaftRange=[];//进入安全范围的设备集合

function getBoundary() {     
  addDistrict("信阳");  
}  

window.onload = function(){
	 window.setInterval(() => { 
		  getMarketByCity()    
			},10000) ;

		//
};
function getMarketByCity(){//根据编码从服务端获取点的坐标
		
			//sd[0].style.height="329px";
		$.ajax({
		    url:"http://192.168.1.55:9999/bmap/getMaker",    //请求的url地址
		    dataType:"json",   //返回格式为json
		   // data:{"id":"value"},    //参数值
		    type:"GET",   //请求方式
		    beforeSend:function(){
		        //请求前的处理
		    },
		    success:function(req){
		          deviceName=[];
		          devicePoint=[];
	        	  for(var i=0;i<deviceMarker.length;i++){
	        		  map.removeOverlay(deviceMarker[i]);
              }
              deviceMarker=[];
	        	  var myIcon = new  BMap.Icon("static/img/icon_drivce_small.png", new BMap.Size(37,45));
		        for(var j = 0; j < req.length; j++){
		    				var point = new BMap.Point(req[j].x, req[j].y);
		    				var marker = new BMap.Marker(point,{icon:myIcon});
		    			
		    				devicePoint.push(point);//把point放入集合
		    				var u = map.getZoom();
		    				if(u>12){//缩放为10级时 展示点  否则展示热力图
		    					map.addOverlay(marker); 
		    				}else{
		    					 openHeatmap();
		    				}
		    				
		    				deviceName.push(req[j].id);//把设备名放入集合中
		    				marker.setTitle(req[j].id);
		    				var label = new BMap.Label("设备号:"+req[j].id+"于"+(new Date(req[j].date)).format("yyyy-MM-dd hh:mm:ss")+"位于"+req[j].x+","+req[j].y, {offset: new BMap.Size(20, 0)}); //创建marker点的标记,这里注意下,因为百度地图可以对label样式做编辑,所以我这里吧重要的id放在了label(然后再隐藏)   
		    		　　　　 　marker.setLabel(label);  //把label设置到maker上  　
		    			    label.setStyle({display:"none"});//对label 样式隐藏    
		    				marker.addEventListener("mouseover",getAttr);
		    				marker.addEventListener("mouseout",removeAttr);
		    				deviceMarker.push(marker);//把market放入集合
		    				function getAttr(e){
		    					var label = this.getLabel();
		    					label.setStyle({display:"block"});//对label 样式隐藏    
		    				}
		    				
		    				function removeAttr(e){
		    					var label = this.getLabel();
		    					label.setStyle({display:"none"});//对label 样式隐藏    
		    				}
		    		
		        }  
		        
		    },
		    complete:function(){
		        //请求完成的处理
		    },
		    error:function(){
		        //请求出错处理
		    }
		});
		
	}

	

 
  


/**  
* 各种鼠标事件绑定  
*/  
function click(evt) {  
//  alert(evt.target.name); 
//	alert(evt.point.lng+"    "+evt.point."count");  
}  

function mouseover(evt) {  
/*   evt.target.label.setZIndex(99);  
  evt.target.label.setPosition(evt.point);  
  evt.target.label.show();   */
}  

function mousemove(evt) {  
 // evt.target.label.setPosition(evt.point);  
}  

function mouseout(evt) {  
//  evt.target.label.hide();  
}  

function drawBoundary() {  
  //包含所有区域的点数组  
  var pointArray = [];  

  /*画遮蔽层的相关方法  
  *思路: 首先在中国地图最外画一圈，圈住理论上所有的中国领土，然后再将每个闭合区域合并进来，并全部连到西北角。  
  *      这样就做出了一个经过多次西北角的闭合多边形*/  
  //定义中国东南西北端点，作为第一层  
  var pNW = { lat: 59.0, lng: 73.0 }  
  var pNE = { lat: 59.0, lng: 136.0 }  
  var pSE = { lat: 3.0, lng: 136.0 }  
  var pSW = { lat: 3.0, lng: 73.0 }  
  //向数组中添加一次闭合多边形，并将西北角再加一次作为之后画闭合区域的起点  
  var pArray = [];  
  pArray.push(pNW);  
  pArray.push(pSW);  
  pArray.push(pSE);  
  pArray.push(pNE);  
  pArray.push(pNW);  
  //循环添加各闭合区域  
  for (var i = 0; i < blist.length; i++) {  
      //添加显示用标签层  
      var label = new BMap.Label(blist[i].name, { offset: new BMap.Size(20, -10) });  
      label.hide();  
     map.addOverlay(label);  

      //添加多边形层并显示  
      var ply = new BMap.Polygon(blist[i].points, { strokeWeight: 3, strokeColor: "#5ac5ff", fillOpacity: 0.01, fillColor: " #FFFFFF" }); //建立多边形覆盖物  
      ply.name = blist[i].name;  
      ply.label = label;  
      ply.addEventListener("click", click);  
      ply.addEventListener("mouseover", mouseover);  
      ply.addEventListener("mouseout", mouseout);  
      ply.addEventListener("mousemove", mousemove);  
      map.addOverlay(ply);  

      //添加名称标签层  
    //  var centerlabel = new BMap.Label(blist[i].name, { offset: new BMap.Size(0, 0) });  
     // centerlabel.setPosition(ply.getBounds().getCenter());  
    //  map.addOverlay(centerlabel);  

      //将点增加到视野范围内  
      var path = ply.getPath();  
      pointArray = pointArray.concat(path);  
      //将闭合区域加到遮蔽层上，每次添加完后要再加一次西北角作为下次添加的起点和最后一次的终点  
      pArray = pArray.concat(path);  
      pArray.push(pArray[0]);  
  }  

  //限定显示区域，需要引用api库  
  var boundply = new BMap.Polygon(pointArray);  
 // BMapLib.AreaRestriction.setBounds(map, boundply.getBounds());  
  map.setViewport(pointArray);    //调整视野   

  //添加遮蔽层  
  var plyall = new BMap.Polygon(pArray, { strokeOpacity: 0.0000001, strokeColor: "#000000", strokeWeight: 0.00001, fillColor: "#ffffff", fillOpacity: 1 }); //建立多边形覆盖物  
//  map.addOverlay(plyall);  
}  

 setTimeout(function () {  
  getBoundary();  
}, 100);  
// ************************渲染地图样式begin********************************//
addindividuation(map);
//************************渲染地图样式end********************************//


// ************************热力图begin********************************//
if(!isSupportCanvas()){
	alert('热力图目前只支持有canvas支持的浏览器,您所使用的浏览器不能使用热力图功能~')
}
//详细的参数,可以查看heatmap.js的文档 https://github.com/pa7/heatmap.js/blob/master/README.md
//参数说明如下:
/* visible 热力图是否显示,默认为true
 * opacity 热力的透明度,1-100
 * radius 势力图的每个点的半径大小   
 * gradient  {JSON} 热力图的渐变区间 . gradient如下所示
 *	{
		.2:'rgb(0, 255, 255)',
		.5:'rgb(0, 110, 255)',
		.8:'rgb(100, 0, 255)'
	}
	其中 key 表示插值的位置, 0~1. 
	    value 为颜色值. 
 */
 var pointsArray = [];

var heatmapOverlay = new BMapLib.HeatmapOverlay({"radius":20});
map.addOverlay(heatmapOverlay);

//是否显示热力图
function openHeatmap(){
var test=[];
	for(var i=0;i<devicePoint.length;i++){
		devicePoint[i].count=100;
		test.push(devicePoint[i]);
	}
	 heatmapOverlay.setDataSet({data:test,max:100});
	
    heatmapOverlay.show();
}
function closeHeatmap(){
    heatmapOverlay.hide();
}
closeHeatmap();

function setGradient(){
 	/*格式如下所示:
	{
  		0:'rgb(102, 255, 0)',
 	 	.5:'rgb(255, 170, 0)',
	  	1:'rgb(255, 0, 0)'
	}*/
 	var gradient = {};
 	var colors = document.querySelectorAll("input[type='color']");
 	colors = [].slice.call(colors,0);
 	colors.forEach(function(ele){
		gradient[ele.getAttribute("data-key")] = ele.value; 
 	});
    heatmapOverlay.setOptions({"gradient":gradient});
}
//判断浏览区是否支持canvas
function isSupportCanvas(){
    var elem = document.createElement('canvas');
    return !!(elem.getContext && elem.getContext('2d'));
}
//************************热力图end********************************//


//查询设备列表是否存在
$(document).on("click", "#searchDeviceId", function() {
	var seachDeviceId = $("#deviceId").val();
	var seachBeFoundDevice;
	for (var i = -0; i < deviceName.length; i++) {
		if (deviceName[i] == seachDeviceId) {
			befoundDeviceName.push(deviceName[i])
			seachBeFoundDevice = deviceName[i];
		}
	}
	if (seachBeFoundDevice) {
		$("#findDeviceName").html("找到设备号" + seachBeFoundDevice);
	} else {
		$("#findDeviceName").html("未找到设备");
	}
});

// 监听放大缩小事件 结束
map.addEventListener("zoomend", function() {
	var u = map.getZoom();
	if (u > 12) {
		closeHeatmap();// 关闭热力图
		for (var i = 0; i < deviceMarker.length; i++) {
			map.addOverlay(deviceMarker[i]);
		}
	} else {

		for (var i = 0; i < deviceMarker.length; i++) {
			map.removeOverlay(deviceMarker[i]);
		}
		openHeatmap();// 开启热力图
	}
});

// 是否进入安全范围
function isFanweiNei() {
	var notify = "";
	//判断所有点是否有进入圈的
	for (var i = 0; i < deviceMarker.length; i++) {
		for (var j = 0; j < overlays.length; j++) {
			if (BMapLib.GeoUtils.isPointInPolygon(deviceMarker[i].getPosition(), overlays[j])) {
				var label = deviceMarker[i].getLabel();
				deviceIntoSaftRange.push(deviceMarker[i].getTitle());
				if (label != null) {
					notify = notify + label.getContent() + "进入安全范围" + "<br/>"
				}
			}
		}
	}
	//判断原来进入圈的是否出了圈
	for (var m = 0; m < deviceMarker.length; m++) {
		for(var x=0;x<deviceIntoSaftRange.length;x++){
			if(deviceMarker[m].getTitle()==deviceIntoSaftRange[x]){
				  for (var n = 0; n < overlays.length; n++) {
			　　           if (!BMapLib.GeoUtils.isPointInPolygon(deviceMarker[m].getPosition(), overlays[n])) {
			       var label = deviceMarker[m].getLabel();
					if (label != null) {
						notify = notify + label.getContent() + "出了安全范围" + "<br/>"
					}
			                　deviceIntoSaftRange.splice(x, 1); // 将使后面的元素依次前移，数组长度减1
			         x--; // 如果不减，将漏掉一个元素
			　　 　　}
			　　}
			}
		}

}
	
	$("#deviceNotify").html(notify);
}

// 追踪 设备号信息
$(document).on("click", "#follow", function() {

	var pois = [];
	$.ajax({
		url : "http://192.168.1.55:9999/bmap/follow", // 请求的url地址
		dataType : "json", // 返回格式为json
		data : {
			"ids" : JSON.stringify(befoundDeviceName)
		}, // 参数值
		type : "GET", // 请求方式
		beforeSend : function() {
			// 请求前的处理
		},
		success : function(req) {
			for (var j = 0; j < req.length; j++) {
				var point = new BMap.Point(req[j].x, req[j].y);
				marker = new BMap.Marker(point);
				console.log(point)
				pois.push(point);
			}
			var sy = new BMap.Symbol(BMap_Symbol_SHAPE_BACKWARD_OPEN_ARROW, {
				scale : 0.6,// 图标缩放大小
				strokeColor : '#fff',// 设置矢量图标的线填充颜色
				strokeWeight : '2',// 设置线宽
			});
			var icons = new BMap.IconSequence(sy, '10', '30');
			var polyline = new BMap.Polyline(pois, {
				enableEditing : false,// 是否启用线编辑，默认为false
				enableClicking : true,// 是否响应点击事件，默认为true
				icons : [ icons ],
				strokeWeight : '8',// 折线的宽度，以像素为单位
				strokeOpacity : 0.8,// 折线的透明度，取值范围0 - 1
				strokeColor : "#18a45b" // 折线颜色
			});
			map.addOverlay(polyline); // 增加折线
			// map.addOverlay(marker);
		},
		complete : function() {
			// 请求完成的处理
		},
		error : function() {
			// 请求出错处理
		}
	});
})

// ************************判断绘制多边形安全栏beign********************************//
var polygon1;
var overlays = [];
var overlaycomplete = function(e){
	var pol=[]
    overlays.push(e.overlay);
    var path = e.overlay.getPath();//Array<Point> 返回多边型的点数组
    for(var i=0;i<path.length;i++){
    	var point=new BMap.Point(path[i].lng,path[i].lat);
    	pol.push(point);
    }
     polygon1 = new BMap.Polygon(pol);
	// window.setInterval("isFanweiNei()",5000);
	 	 window.setInterval(() => { 
		  isFanweiNei() 
			},5000) ;
};
var styleOptions = {
    strokeColor:"#00ff00",    //边线颜色。
    fillColor:"#00ff00",      //填充颜色。当参数为空时，圆形将没有填充效果。
    strokeWeight: 3,       //边线的宽度，以像素为单位。
    strokeOpacity: 0.8,	   //边线透明度，取值范围0 - 1。
    fillOpacity: 0.2,      //填充的透明度，取值范围0 - 1。
    strokeStyle: 'dashed' //边线的样式，solid或dashed。
}
//实例化鼠标绘制工具
var drawingManager = new BMapLib.DrawingManager(map, {
    isOpen: false, //是否开启绘制模式
    enableDrawingTool: true, //是否显示工具栏
    drawingMode:BMAP_DRAWING_POLYGON,
    drawingToolOptions: {
        anchor: BMAP_ANCHOR_TOP_RIGHT, //位置
        offset: new BMap.Size(390, 105),//偏离值
        drawingModes:[
            BMAP_DRAWING_POLYGON,
            //BMAP_DRAWING_CIRCLE
        ]
    },
    circleOptions: styleOptions, //圆的样式
    polylineOptions: styleOptions, //线的样式
    polygonOptions: styleOptions, //多边形的样式
    rectangleOptions: styleOptions //矩形的样式
});  
 //添加鼠标绘制工具监听事件，用于获取绘制结果
drawingManager.addEventListener('overlaycomplete', overlaycomplete);
function clearAll() {
	for(var i = 0; i < overlays.length; i++){
       // map.removeOverlay(overlays[i]);
       console.log(overlays[i]);
    }
    overlays.length = 0   
}

//************************判断绘制多边形安全栏end********************************//

function addDistrict(districtName) {  
  //使用计数器来控制加载过程  
  districtLoading++;  
  var bdary = new BMap.Boundary();  
  bdary.get(districtName, function (rs) {       //获取行政区域  
      var count = rs.boundaries.length; //行政区域的点有多少个  
      if (count === 0) {  
          alert('未能获取当前输入行政区域');  
          return;  
      }  
      for (var i = 0; i < count; i++) {  
          blist.push({ points: rs.boundaries[i], name: districtName });  
      };  
      //加载完成区域点后计数器-1  
      districtLoading--;  
      if (districtLoading == 0) {  
          //全加载完成后画端点  
          drawBoundary();  
      }  
  });  
} 


	$(".BMapLib_Drawing BMap_noprint anchorTR").css({
		right:300,
	});
    },





  },

  mounted: function() {
    //挂载页面
    this.ready();
	//this.addDistrict("信阳");
	//this.openHeatmap();
  }
};
</script>


